最近整理项目中发现，头像这个应用的场景很多，而且还要一些需要特殊处理的比如想有生成头像的这种操作。于是便着手搞了一个头像的组件发布到npm中 view-avatar
为什么要有这个组件？
因为项目中使用头像的地方，经常需要处理图片出错的情况。其他情况还有就是需要有生成头像这种功能，只需要生成类似带有文字的头像即可。
有没有类似的组件？
当然是有前期调研过的，比如vue-avatar，star数也很多。但是为什么无法满足需求呢，第一生成头像的文字颜色值和底色值需要自己去配置，作为开发者来说这点很麻烦，因为有时自己也不知道该用什么颜色。
第二它生成的图片显示的文案无法通过slot的方式进行自定义，无法自定义配置想显示的图片文字内容，第三没有src出现错误时的处理
由此决定开发一个可以自定义的，各种方式可以自己配置的头像组件
和vue-avatar对比
| view-avatar | vue-avatar | |
|---|---|---|
| 可以根据src显示图片 | Y | Y |
| 根据文案内容生成图片 | Y | Y |
| 生成图片的文案内容可以自定义 | Y | Y |
| 可以自定义文案文字颜色和底色 | Y | Y |
| 可以设置图片的宽高 | Y | Y |
| 可以设置图片的样式，完全自定义 | Y | Y |
| 文字颜色和底色可以通过配置随机使用 | Y | N |
| 可以在图片加载失败的情况下自定义处理 | Y | N |
| 具备tooltips显示头像名字的辅助功能 | Y | N |
上面是大体的对比，当然vue-avatar的也有一些其他的优点，比如使用username，它的更加智能些。view-avatar的处理方式是抽取了最后两个字符进行显示，简单一些。然而view-avatar有几个slot的处理方式，比如 imgError（图片错误处理）、text（文字自定义显示）、默认的slot（直接自定义图片）等